(function () {
    var primary = 'rgba(76,141,255,0.7)';
    var primary3 = 'rgba(76,141,255,0.3)';
    var primary1 = 'rgba(76,141,255,0.1)'
    var dark = 'rgba(41,60,91,0.9)';
    var style = 'solid'; //hachure solid cross-hatch dots;
    var defaultOpt = {
        stroke: primary
    };
    var default3Opt = {
        stroke: primary3
    };
    var hachureOpt = {
        stroke: primary,
        fill: primary,
    };
    var footerOpt = {
        stroke: primary,
        fill: primary,
        fillStyle: 'solid'
    };
    var contentOpt = {
        stroke: primary1,
        fill: primary1,
        fillStyle: style
    };
    // 注册按钮
    (function () {
        var resgister = rough.canvas(document.getElementById('register'));
        var width = resgister.canvas.width;
        var height = resgister.canvas.height;
        resgister.rectangle(0, 0, width, height, defaultOpt);
        resgister.canvas.onmouseenter = function (e) {
            var rc = rough.canvas(e.target);
            rc.rectangle(0, 0, e.target.width, e.target.height, hachureOpt);
        };
        resgister.canvas.onmouseleave = function (e) {
            var rc = rough.canvas(e.target);
            rc.canvas.getContext('2d').clearRect(0, 0, e.target.width, e.target.height);
            rc.rectangle(0, 0, e.target.width, e.target.height, defaultOpt);
        }
    })();
    
    // 页脚
    (function () {
        var footer = rough.canvas(document.getElementById('footer'));
        var vertices = [
            [180, 256], [240, 60], [240, 60],
            [270, 30], [300, 10], [330, 0],
            [1280, 0], [1280, 256]
        ];
        footer.polygon(vertices, footerOpt);
    })();
    // 全屏
    (function () {
        var full = rough.canvas(document.getElementById('full'));
        change();

        function change() {
            triangle({ x: 300, y: -260 }, 2, -40, hachureOpt);

            triangle({ x: 950, y: 250 }, 1, 20, hachureOpt);
            triangle({ x: 1020, y: 140 }, 1.7, 20, default3Opt);
            triangle({ x: 1040, y: 250 }, 1.7, 20, default3Opt);

            triangle({ x: 30, y: 450 }, 0.2, -60, hachureOpt);
            triangle({ x: -280, y: 450 }, 1, -60, hachureOpt);
            triangle({ x: -320, y: 550 }, 1.2, -55, default3Opt);

            triangle({ x: -450, y: 800 }, 2, -35, contentOpt);

            triangle({ x: -600, y: 2500 }, 2, -70, default3Opt);

            triangle({ x: 1350, y: 2100 }, 2, 30, default3Opt);

            triangle({ x: 100, y: 3150 }, 1, 75, default3Opt);

            triangle({ x: 0, y: 3800 }, 0.6, 20, hachureOpt);
            triangle({ x: 0, y: 3800 }, 1.2, 20, default3Opt);
            triangle({ x: 310, y: 4200 }, 0.2, 20, hachureOpt);

            triangle({ x: -300, y: 3900 }, 3, 10, contentOpt);

            triangle({ x: 860, y: 4500 }, 1.4, 20, contentOpt);

            triangle({ x: 1200, y: 4000 }, 1, 18, default3Opt);
        }

        function triangle(relative, scale, angle, opt) {
            var options = [
                [210, 0],
                [400, 300],
                [0, 300]];
            var ctx = full.canvas.getContext('2d');
            ctx.save();
            ctx.translate(relative.x, relative.y);
            ctx.rotate(angle * Math.PI / 180);
            ctx.scale(scale, scale);
            full.polygon(options, opt);
            ctx.restore();
        }
    })();
})();